<template>
	<!-- 黄色背景大框 -->
	<div class="banner">
			<!-- 地方选择 -->
				<div class="city">
					<router-link to="/city">
						<p>{{cityName}}<i class="iconfont">&#xe651;</i></p>
						
					</router-link>
									
				<!-- 搜索栏 -->
				<form class="search">
					<i class="iconfont">&#xe616;</i>
					<input type="text" placeholder="冰雪神话" />
				</form>
				</div>
			<!-- 热搜部分 -->
			<ul class="center">
				<li v-for="item in list" :key="item.id">
					<router-link :to="item.url">{{item.name}}</router-link>
				</li>
			</ul>
			<!-- 轮播 -->
			<div class="swiper banners-swiper">
			 <ul class="swiper-wrapper">
			        <li class="swiper-slide">
						<img src="@/assets/img/020bb8491781bab1.jpg" />
					</li>
			        <li class="swiper-slide">
						<img src="@/assets/img/080896ad7e9a6fcf.jpg" />
					</li>
			        <li class="swiper-slide">
						<img src="@/assets/img/0eb65eda05cd62fd.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="@/assets/img/3b997975761030a3.jpg" />
					</li>
					<li class="swiper-slide">
						<img src="@/assets/img/58941602841028.jpg"/>
					</li>
			</ul>
			   <div class="swiper-pagination"></div> <!-- 分页器。如果放置在swiper外面，需要自定义样式。 -->
			</div>
			
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	//1.引入vue周期函数
	import {onMounted} from 'vue'
	//2.引入swiper动态组件
	import Swiper ,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination
	} from 'swiper'
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube,Pagination])
	
	// 导出Banner
	export default{
		name:'Banner',
		data(){
			return{
				list:[
					{ id:1 , url:'/' , name:'热搜' },
					{ id:2 , url:'/' , name:'赏银叶' },
					{ id:3 , url:'/' , name:'赏枫叶' },
					{ id:4 , url:'/' , name:'秋日骑行' },
					{ id:5 , url:'/' , name:'温泉滑雪' },
				]
			}
		},
		computed:{
			...mapState(['cityName']),
		},
		//4.设置应用banners-swiper的位置以及具体操作
		setup(){
			onMounted(	()=>{
				new Swiper('.banners-swiper',{
					//循环播放
					loop:true,
					//设置分页器效果
					pagination :{
						el:'.banners-pagination'
					},
					//设置播放项：时间，不停止   手指经过不暂停自动
					autoplay :{
						delay: 3000,
						stopOnLastSlide: false,
						disableOnInteraction:true,
					}
				})
			})
		}
	}
</script>

<style scoped>
/* 顶部导航栏样式 */
.banner{
	background-color: #ffdd40;
	width: 100%;
	height: 6rem;
}
.banner p:nth-child(1) a{
	text-decoration: none;
	font-size: 0.45rem;
	font-weight: bold;
	color: black;
	padding-left: 0.15rem;
}
.banner p:nth-child(1){
	top: 0.3rem;
	left: 0.3rem;
	position: absolute;
}
.banner p:nth-child(1) i{
	font-size: 0.4rem;
	font-weight: bolder;
}
.city p{
	width: 100px;
	color: black;
	font-size: 0.4rem;
	margin-top: 0.3rem;
}
.search{
	width: 74%;
	top: 0.5rem;
	margin-left: 2rem;
	line-height: 0.7rem;
	border-radius: 10rem;
	overflow: hidden;
	position: relative;
	background-color: white;
}
.search input{
	width: 80%;
	line-height: 0.7rem;
	font-size: 0.35rem;
	text-indent: 0.5em;
	border: none;
}
.search i{
	font-size: 0.4rem;
	margin-left: 0.15rem;
}
/* 热搜部分 */
.center{
	width: 90%;
	height: 1.8rem;
	top: 1.2rem;
	font-size: 0.35rem;
	position: absolute;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 0.45rem;
}
.center li {
	width: 4rem;
	text-align: center;
	background-color: #ffeea0;
	border-radius: 3rem;
	line-height: 0.75rem;
	margin-left: 0.2rem;
}
.center li:nth-child(1){
	background-color: #FFDD40;
	margin-right: -0.3rem;
	margin-left: -0.5rem;
}
.center li:nth-child(1) a, .center li a{
	text-decoration: none;
	color: black;
	font-weight: bold;
}
/* 轮播区域样式 */
.banners-swiper{
	width: 90%;
	height: 4.5rem;
	border-radius: 0.4rem;
	position: relative;
	top: 1.9rem;
}
.banners-swiper img{
	width: 100%;
	height: 100%;
}
/* 穿透 */
banners-pagination :deep(.swiper-pagination-bullet-active){
	background-color:gold;
}
</style>
